<template>
  <div>
    <p @click="num++">num:{{num }}</p>
    <p>doubleNum:{{ doubleNum }}</p>
    <p @click="fee=num+10">fee:{{ fee }}</p>
    <button @click="stop()">停止监听</button>
    <br>
    <input v-model="msg"/>
    <p>{{ msg }}</p>
  </div>
</template>
<script setup>
// computed计算:从现有数据计算出新的数据,有缓存
// watch监听:监听数据的变化,没有缓存
// watchEffect监听:监听数据的变化(被其引用的数据都会被监听)
import { ref ,reactive,computed,watch,watchEffect} from 'vue'; 
// 定义响应数据num 默认值是0 num的值从localStorage中获取
const num = ref(localStorage.getItem("num")||0);
const doubleNum = computed(()=>num.value*2);
const fee = computed({
  // 获取feed值的时候执行get方法
  get(){
    return num.value*2;
  },
  // 设置feed值的时候执行set方法
  set(v){
    num.value = v/2;
  }
})
// 监听num的变化,并把num值存储到localStorage中
// watch方法的第一个参数num是要监听的数据
// 第二个参数是回调函数,当num发生变化的时候执行回调函数
// newVal是新的值,oldVal是旧的值(引用类型oldVal和newVal是同一个对象)
// stop是一个函数,调用stop可以停止监听
// watch方法的第三个参数是一个配置对象 deep:true表示深度监听 immediate:true表示立即执行回调函数
// 作业:如何监听多个数据,如何监听reactive定义的数据,如何监听reactive定义的数据的某个属性?
var stop = watch(num,(newVal,oldVal)=>{
  // console.log(newVal,oldVal);
  localStorage.setItem("num",newVal);
},{deep:true,immediate:true})

const msg = ref("hello");
// 使用watchEffect 监听msg和num的变化
watchEffect(()=>{
  // 在回调函数中引用的数据都会被监听
  console.log(msg.value,num.value);
})

 
</script>